<template>
    <div class="goodsForm">
        <dynamic-form :formDataList="formDataList" @getFormData='getFormData'></dynamic-form>
        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-upload2"
                        plain
                        @click='getWipExport'
                        :disabled="tableList.length <= 0"
                    >
                        导出
                    </el-button>
                    <el-tooltip placement="top">
                        <div slot="content">
                            导出规则:</br>
                            1. 导出当前页面显示的所有数据(可通过翻页</br>器设置每页显示数量)</br>
                            2. 每次导出的最大数量是100条
                        </div>
                        <span class="iconfont icon-wenhao wenhao"></span>
                    </el-tooltip>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <el-button type="primary" size="mini" @click='processSetHandle'>工序设置</el-button>
                    <!-- 列配置表格 -->
                    <popChk :disposeGroup='tableGroup' :name='name'
                        @handleChangeDiposeGroup='handleChangeDiposeGroup' ref="dispose">
                        <template #title>
                            <span class="title">列配置</span>
                        </template>
                        
                        <template #dispose_btn>
                            <el-button type="primary" size="mini" icon="iconfont icon-liepeizhi" plain
                                style="height:28px;line-height:10px;margin-left:10px" @click="name = 'table'">列配置
                            </el-button>
                        </template>
                       
                    </popChk>
                </div>
            </template>
        </custom-setbtn>
        <tableList
            :tableGroup='tableHeaderList'
            :tableList='tableList'
            @getTableData='getTableData'
            :searchForm='formDataList.searchForm'
            ref='table'>
        </tableList>

        <el-dialog :visible.sync="processSetFlag" width='968px' class="processSet">
            <div slot='title'>
                <p style="font-size: 18px">配置工序</p>
                <p style="font-size: 14px; color: rgb(102,102,102)">可通过拖拽，对面板上的工序进行排序</p>
            </div>
            <div class="box">
                <p class="title">已显示工序</p>
                <div class="isList" id="isList">
                    <div v-for="(item, i) in processShowData" :key="i">
                        <div class="proItem" @click="processShowChange(i, item.name, 'show')">
                            <el-checkbox :label="item.name" v-model="item.flag"></el-checkbox>
                            <span class="iconfont icon-row"></span>
                        </div>
                    </div>
                </div>
                <p class="title">已隐藏工序</p>
                <div class="noList" id="noList">
                    <div v-for="(item, i) in processHideData" :key="i">
                        <div class="proItem" @click="processShowChange(i, item.name, 'hiden')">
                            <el-checkbox :label="item.name" v-model="item.flag"></el-checkbox>
                            <span class="iconfont icon-row"></span>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="processSetFlag = false">取 消</el-button>
                <el-button type="primary" @click="processSetOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import dynamicForm from '@/components/dynamicForm'
import tableList from '../components/tableList.vue'
import fileDownload from "js-file-download";
import Sortable from "sortablejs"
import popChk from './popCheckbox.vue'
import {
    wip,
    wipExport,
    wipHeader,
    processSet
} from '@/api/statisticsController'
import { productColumns } from '@/api/customFieldController'
export default {
    components: {
        dynamicForm,
        tableList,
        popChk
    },
    data() {
        return {
            // 表单列表
            formDataList: {
                formGroup: [
                    {
                        label: 'workOrderCode',
                        name: '工单编号',
                        prop: '',
                        placeholder: '请输入工单编号',
                        key: 'srk'
                    },
                    {
                        label: 'productCode',
                        name: '产品编号',
                        prop: '',
                        placeholder: '请输入产品编号',
                        key: 'srk'
                    },
                    {
                        label: 'productName',
                        name: '产品名称',
                        prop: '',
                        placeholder: '请输入产品名称',
                        key: 'srk'
                    },
                    {
                        label: 'productSpecification',
                        name: '产品规格',
                        prop: '',
                        placeholder: '请输入产品规格',
                        key: '',
                        key: 'srk'
                    },
                    {
                        label: ['startTimeStart', 'startTimeEnd'],
                        name: '计划开始时间',
                        prop: '',
                        key: 'dpi'
                    },
                    {
                        label: ['endTimeStart', 'endTimeEnd'],
                        name: '计划结束时间',
                        prop: '',
                        key: 'dpi'
                    },
                    {
                        label: 'workOrderState',
                        name: '工单状态',
                        prop: '',
                        placeholder: '请选择',
                        key: 'sel',
                        node: {
                            isRadio: false,
                            default: ['0','1'],
                            options: [
                                { value: '0', label: '未开始' },
                                { value: '1', label: '执行中' },
                                { value: '2', label: '已结束' },
                                { value: '3', label: '已取消' }
                            ]
                        }
                    },
                ],
                searchForm: {
                    limit: 10,
                    page: 1
                },
                formSet: true
            },
            // 列配置
            tableGroup: [],
            tableGroupC: [],
            name: 'form',
            // 表头
            tableHeaderList: [],
            headData: [],
            // 表格数据
            tableList: [],
            disabled:true,
            processSetFlag: false,
            processShowData: [], // 已显示工序
            processHideData: [], // 已隐藏工序

        }
    },
    mounted() {
        this.getProductColumns({
            type: 'goodsForm'
        })
    },
    methods: {
        // 接口===================================
        // 列配置
        getProductColumns(data) {
            let hData = []
            this.tableGroup = []
            productColumns(data).then(res => {
                if(res.code == 200) {
                    res.data.map((item, i) => {
                        let w = ''
                        if(item.chineseName == '序号') {
                            w = '120'
                        } else {
                            w = '180'
                        }
                        if(item.state == true) {
                            hData.push({
                                label: item.name,
                                name: item.chineseName,
                                width: w
                            })
                        }
                        this.tableGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            width: w,
                            state: item.state,
                        })
                    })
                    this.headData = hData
                    this.tableGroupC = res.data
                    let data = {}
                    for(let key in this.formDataList.searchForm) {
                        if(this.formDataList.searchForm[key]) {
                            data[key] = this.formDataList.searchForm[key]
                        }
                    }
                    this.$refs.table.onloadLogin(true)
                    this.getTableData(data)
                    this.getWipHeader(data)
                }
            })
        },
        // 表头
        getWipHeader(data) {
            let arr = []
            let groupData = []
            this.tableGroup.map(item => {
                if(item.state) {
                    groupData.push(item)
                }
            })
            wipHeader(data).then(res => {
                if(res.code == 200 && res.data) {
                    this.headData = []
                    res.data.map(item => {
                        if(arr.indexOf(item[0]) == -1) {
                            arr.push(item[0])
                            if(item[0] == '工单编号') {
                                this.headData.push({
                                    label: 'workOrderCode',
                                    name: '工单编号',
                                    width: '150',
                                    fixed: 'left',
                                    index: 0
                                })
                            } else if(item[0] == '产品名称') {
                                this.headData.push({
                                    label: 'productName',
                                    name: '产品名称',
                                    width: '150',
                                    fixed: 'left',
                                    index: 1
                                })
                            } else if(item[0] == '产品编号') {
                                this.headData.push({
                                    label: 'productCode',
                                    name: '产品编号',
                                    width: '150',
                                    fixed: 'left',
                                    index: 2
                                })
                            } else if(item[0] == '产品规格') {
                                this.headData.push({
                                    label: 'productSpecification',
                                    name: '产品规格',
                                    width: '150',
                                    fixed: 'left',
                                    index: 3
                                })
                            } else {
                                this.headData.push({
                                    label: item[0],
                                    name: item[0],
                                    width: '',
                                    children: groupData
                                })
                            }
                        }
                    })
                    this.getProcessSet({}, 1)
                }
            })
        },
        // 表格数据
        getTableData(data) {
            wip(data).then(res => {
                this.$refs.table.onloadLogin(false)
                if(res.code == 200) {
                    let arr = res.data.records
                    this.tableList = res.data.records
                    arr.map(item => {
                        item.list.map((k, j) => {
                            for(let key in k) {
                                item[key + k.processName] = k[key]
                            }
                        })
                    })
                    this.$refs.table.totalNum(res.data.total)
                }
            })
        },
        // 工序设置
        getProcessSet(data, n,) {
            this.processShowData = []
            this.processHideData = []
            processSet(data).then(res => {
                if(res.code == 200 && res.data.vos != null) {
                    res.data.vos.map((item, i) => {
                        if(item.flag) {
                            this.processShowData.push({
                                name: item.name,
                                flag: item.flag
                            })
                            if(n == 1) {
                                let d = this.headData.findIndex(k => { return k.name == item.name })
                                this.headData[d].index = i + 4
                            }
                        } else {
                            this.processHideData.push({
                                name: item.name,
                                flag: item.flag
                            })
                        }
                    })
                    if(n === 1) {
                        function compare(property) {
                            return function (a, b) {
                                var value1 = parseFloat(a[property]);
                                var value2 = parseFloat(b[property]);
                                return value1 - value2;        //倒序   value1-value2  正序
                            }
                        }
                        this.headData.sort(compare('index'))
                        this.tableHeaderList = this.headData
                    } else {
                        this.dragDrop()
                    }
                }
            })
        },

        // 事件====================================
        //监视复选框值变化
        handleChangeDiposeGroup(val) {
            let data = []
            this.tableGroupC.map(item => {
                let d = val.find(res => { return res == item.name })
                let s = null
                if(d != undefined) {
                    s = true
                } else {
                    s = false
                }
                data.push({
                    name: item.name,
                    chineseName: item.chineseName,
                    state: s
                })
            })
            let obj = {
                type: 'goodsForm',
                configureList: data
            }
            this.getProductColumns(obj)
        },
        //点击查询获取表单数据
        getFormData(val){
            val.page = 1
            this.formDataList.searchForm = val
            this.$refs.table.onloadLogin(true)
            this.getWipHeader(val)
            this.getTableData(val)
        },
        // 导出
        getWipExport() {
            wipExport({}).then(res => {
                fileDownload(res, '在制品报表' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                    'application/vnd.ms-excel;charset=UTF-8')
            })
        },

        // 工序设置=================================
        // 打开设置
        processSetHandle() {
            this.getProcessSet({})
            this.processSetFlag = true
        },
        // 显示隐藏
        processShowChange(n, name, type) {
            if(type == 'show') {
                if(this.processShowData.length > 1) {
                    this.processShowData.splice(n, 1)
                    this.processHideData.push({
                        name: name,
                        flag: false
                    })
                } else {
                    this.utils.showMsg('已显示工序数量最少不低于1个!', 'error')
                }
            } else if(type == 'hiden') {
                this.processHideData.splice(n, 1)
                this.processShowData.push({
                    name: name,
                    flag: true
                })
            }
        },
        // 拖拽
        dragDrop() {
            const _this = this
            let el = document.getElementById('isList')
            Sortable.create(el, {
                animation: 150,
                swapThreshold: 1,
                onEnd({
                    newIndex,
                    oldIndex
                }) {
                    const currRow = _this.processShowData.splice(oldIndex, 1)[0]
                    _this.processShowData.splice(newIndex, 0, currRow)
                    let newArray = _this.processShowData.slice(0);
                    _this.processShowData = []
                    _this.$nextTick(function () {
                        _this.processShowData = newArray;
                    });
                }
            })
            let el1 = document.getElementById('noList')
            Sortable.create(el1, {
                animation: 150,
                onEnd({
                    newIndex,
                    oldIndex
                }) {
                    const currRow = _this.processHideData.splice(oldIndex, 1)[0]
                    _this.processHideData.splice(newIndex, 0, currRow)
                    let newArray = _this.processHideData.slice(0);
                    _this.processHideData = []
                    _this.$nextTick(function () {
                        _this.processHideData = newArray;
                    });
                }
            })
        },
        // 确定保存
        processSetOk() {
            let data = {
                vos: this.processShowData.concat(this.processHideData)
            }
            processSet(data).then(res => {
                if(res.code == 200) {
                    this.processSetFlag = false
                    this.getProductColumns({type: 'goodsForm'})
                }
            })
        }
    },

}
</script>

<style lang="less" scoped>
.wenhao {
    margin-left: 20px;
}
.goodsForm {
    overflow: auto;
    .processSet {
        .box {
            height: 568px;
            background: #fafafa;
            border: 1px solid #e5e5e5;
            .title {
                font-size: 12px;
                margin: 10px 0 5px 15px;
            }
            .isList, .noList {
                padding: 0 5px;
                display: flex;
                flex-wrap: wrap;
                overflow: auto;
                align-content: flex-start;
                > div {
                    width: 25%;
                    padding: 0 10px;
                    height: 54px;
                    .proItem {
                        margin: 8px 0;
                        padding: 8px;
                        border: 1px solid #e5e5e5;
                        background: #fff;
                        cursor: pointer;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .icon-row {
                            color: #02b980;
                        }
                    }
                    .proItem:hover {
                        border: 1px solid #02b980;
                    }
                }
            }
            .isList {
                height: 280px;
                border-bottom: 1px solid #e5e5e5;
            }
            .noList {
                height: calc(100% - 345px);
            }
            /deep/ .el-checkbox__label {
                color: #333;
            }
            /deep/ .el-checkbox__label {
                font-size: 12px;
            }
            /deep/ .el-checkbox {
                pointer-events: none;
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: center;
            button {
                width: 100px;
                padding: 8px 20px;
                font-size: 12px;
            }
        }
        /deep/ .el-dialog__header {
            padding: 20px 40px 10px 40px;
        }
        /deep/ .el-dialog__body {
            padding: 15px 40px 10px 40px;
        }
    }
}
</style>